﻿<script type="text/javascript">
    $(function () {
        $('#Username').closest(".input-append").after('<figure id="cua-loader" class="ajax-loader-small hide" style="margin-left: 4px"></figure>');
        $('#Username').bind({
            change: function () {
                $('#username-availabilty').text('');
                $('#check-availability-button')
                    .removeClass("btn-success btn-warning")
                    .find(">i")
                    .removeClass("icon-ok icon-exclamation-sign")
                    .addClass("icon-question-sign");
            }
        });
        $('#check-availability-button').click(function () {
            var btn = $('#check-availability-button');
            $('#username-availabilty').text('');
            if ($("#Username").val().length > 0) {
                $('#cua-loader').removeClass("hide");
                btn.attr('disabled', 'disabled');
                $.ajax({
                    cache: false,
                    type: 'POST',
                    url: '@Url.RouteUrl("CheckUsernameAvailability")',
                    data: $('#Username').serialize(),
                    dataType: 'json',
                    success: function (data) {
                        btn.removeAttr('disabled');
                        btn
                            .removeClass("btn-success btn-warning")
                            .addClass(data.Available ? "btn-success" : "btn-warning")
                            .find(">i")
                            .removeClass("icon-ok icon-question-sign icon-exclamation-sign")
                            .addClass(data.Available ? "icon-ok" : "icon-exclamation-sign");

                        displayNotification(data.Text, data.Available ? "success" : "error");
                    },
                    complete: function () {
                        btn.removeAttr('disabled');
                        $('#cua-loader').addClass("hide");
                    }
                });
            } else {
                $('#username-availabilty').attr('class', 'not-available-status');
                $('#username-availabilty').text('*');
            }
            return false;
        });
    });
</script>
<button type="button" id="check-availability-button" class="btn check-username-availability-button tooltip-toggle" title="@T("Account.CheckUsernameAvailability.Button")">
    <i class="icon-question-sign"></i>
</button>